<html>
<head>
    <title>Ext JS 3.0 Samples</title>

    <style type="text/css">
    #all-demos {

    }
    #all-demos dd {
        float:left;
        width:300px;
        height:100px;
        margin:5px 5px 5px 10px;
        cursor:pointer;
        zoom:1;
    }
    #all-demos dd img {
        width:120px;
        height:90px;
        margin:5px 0 0 5px;
        float:left;
    }

    #all-demos dd div {
        float:left;
        width:160px;
        margin-left:10px;
    }

    #all-demos dd h4 {
        font-family:tahoma,arial,san-serif;
        color:#555;
        font-size:11px;
        font-weight:bold;
    }
    #all-demos dd p {
        color:#777;
    }
    #all-demos dd.over {
        background: #F5FDE3 url(shared/extjs/images/sample-over.gif) no-repeat;
    }
    #loading-mask{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        z-index:20000;
        background-color:white;
    }
    #loading{
        position:absolute;
        left:45%;
        top:40%;
        padding:2px;
        z-index:20001;
        height:auto;
    }
    #loading a {
        color:#225588;
    }
    #loading .loading-indicator{
        background:white;
        color:#444;
        font:bold 13px tahoma,arial,helvetica;
        padding:10px;
        margin:0;
        height:auto;
    }
    #loading-msg {
        font: normal 10px arial,tahoma,sans-serif;
    }

    #all-demos .x-panel-body {
        background-color:#fff;
        border:1px solid;
        border-color:#fafafa #fafafa #fafafa #fafafa;
    }
    #sample-ct {
        border:1px solid;
        border-color:#dadada #ebebeb #ebebeb #dadada;
        padding:2px;
    }

    #all-demos h2 {
        border-bottom: 2px solid #99bbe8;
        cursor:pointer;
        padding-top:6px;
    }
    #all-demos h2 div {
        background:transparent url(../resources/images/default/grid/group-expand-sprite.gif) no-repeat 3px -47px;
        padding:4px 4px 4px 17px;
        color:#3764a0;
        font:bold 11px tahoma, arial, helvetica, sans-serif;
    }
    #all-demos .collapsed h2 div {
        background-position: 3px 3px;
    }
    #all-demos .collapsed dl {
        display:none;
    }
    .x-window {
        text-align:left;
    }
    #all-demos dd h4 span.new-sample{
        color: red;
    }

    #all-demos dd h4 span.updated-sample{
        color: blue;
    }
    </style>
</head>
<body>
<div id="loading-mask" style=""></div>
<div id="loading">
    <div class="loading-indicator"><img src="shared/extjs/images/extanim32.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>Ext 3.0 - <a href="http://extjs.com">extjs.com</a><br /><span id="loading-msg">Loading styles and images...</span></div>
</div>

<div id="viewport">

<div id="hd">
    <h1><a href="http://extjs.com/" title="Home"><span>Ext</span></a></h1>

    <table cellspacing="0" class="nav main-nav">
        <tr>
        <td><a id="home-link" href="http://extjs.com/"><span>Home</span></a></td><td class="active"><a id="products-link" href="http://extjs.com/products"><span>Products</span></a></td><td><a id="support-link" href="http://extjs.com/support"><span>Support</span></a></td><td><a id="jobs-link" href="http://jobs.extjs.com"><span>Jobs</span></a></td><td><a id="company-link" href="http://extjs.com/company"><span>Company</span></a></td><td><a id="blog-link" href="http://extjs.com/blog"><span>Blog</span></a></td><td><a id="store-link" href="http://extjs.com/store"><span>Store</span></a></td>		</tr>
    </table>


    <table cellspacing="0" class="sub-nav">
        <tr>
        <td><a href="http://extjs.com/">Home</a></td><td class="spacer"><img src="shared/extjs/images/c-sep.gif"></td><td><a href="http://extjs.com/products">Products</a></td><td class="spacer"><img src="shared/extjs/images/c-sep.gif"></td><td><a href="http://extjs.com/products/extjs/">Ext JS</a></td><td class="spacer"><img src="shared/extjs/images/c-sep.gif"></td><td>3.0 Samples</td></tr>
    </table>
</div>

<div id="bd">
    <div class="left-column">
        <h3>Ext JS 3.0 Samples</h3>
        <br/>
        <div id="sample-spacer" style="height:800px;"></div>

        <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
        <!--link rel="stylesheet" type="text/css" href="../resources/css/xtheme-gray.css" /-->
        <link rel="stylesheet" type="text/css" href="shared/extjs/css/extjs.css" />

        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>
        <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
        <script type="text/javascript" src="../ext-all.js"></script>
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>

        <!-- App.js contains Ext.App, a simple, re-usable Application component -->
        <script type="text/javascript" src="shared/extjs/App.js"></script>
        <script type="text/javascript" src="shared/extjs/site.js"></script>
        <script type="text/javascript" src="data.js"></script>
        <script type="text/javascript" src="init.js"></script>

        <div id="all-demos">
        </div>

    </div>

    <div class="right-column" style="padding-top:45px;">

        <div class="side-box"><div class="side-box-inner">
            <ul id="sample-menu" class="features"></ul>
        </div></div>
    </div>

    <div style="clear:both"></div>
</div><!-- end bd -->

<div id="ft">
    <table cellspacing="0" class="nav">
        <tr>
        <td><a id="home-foot-link" href="http://extjs.com/">Home</a></td><td class="active"><a id="products-foot-link" href="http://extjs.com/products">Products</a></td><td><a id="support-foot-link" href="http://extjs.com/support">Support</a></td><td><a id="jobs-foot-link" href="http://jobs.extjs.com">Jobs</a></td><td><a id="company-foot-link" href="http://extjs.com/company">Company</a></td><td><a id="blog-foot-link" href="http://extjs.com/blog">Blog</a></td><td><a id="store-foot-link" href="http://extjs.com/store">Store</a></td>		</tr>

    </table>
    <div class="copy">&copy; 2006-2009 Ext, LLC</div>
</div>

</div><!-- end viewport -->

<div class="flyout-menu" id="products-menu" style="display:none;">
    <div style="width:200px;">
    <h3><a href="http://extjs.com/products/extjs">Ext JS</a></h3>
    <p>Cross-browser JavaScript library for building rich internet applications</p>

    <ul>
        <li><a href="http://extjs.com/products/extjs">Overview</a></li>
        <li><a href="http://extjs.com/products/extjs/download.php">Download</a></li>
        <li><a href="http://extjs.com/deploy/dev/examples/samples.html">Samples &amp; Demos</a></li>
        <li><a href="http://extjs.com/deploy/dev/docs/">API Documentation</a></li>
        <li><a href="http://extjs.com/products/license.php">Licensing &amp; Open Source</a></li>

        <li><a href="http://extjs.com/store/extjs/">Purchase</a></li>
    </ul>
    <br/>
    <h3><a href="http://extjs.com/products/gxt">Ext GWT</a></h3>
    <p>Java library for building rich internet applications with GWT</p>
    <ul>
        <li><a href="http://extjs.com/products/gxt">Overview</a></li>

        <li><a href="http://extjs.com/products/gxt/download.php">Download</a></li>
        <li><a href="http://extjs.com/explorer/" target="_blank">Samples &amp; Demos</a></li>
        <li><a href="http://extjs.com/products/license.php">Licensing &amp; Open Source</a></li>
        <li><a href="http://extjs.com/store/gxt/">Purchase</a></li>
    </ul>
    <br/>
    <h3><a href="/products/extcore">Ext Core</a></h3>
    <p>Cross-browser JavaScript library for enhancing web pages</p>
    <ul>
        <li><a href="http://extjs.com/products/extcore">Overview</a></li>
        <li><a href="http://extjs.com/products/extcore/download.php">Download</a></li>
        <li><a href="http://extjs.com/products/extcore/manual/">Manual</a></li>
        <li><a href="http://extjs.com/products/extcore/docs/">API Documentation</a></li>
    </ul>
    </div>
</div>

<div class="flyout-menu" id="support-menu" style="display:none;">
    <div style="width:200px;">

    <h3><a href="http://extjs.com/support">Support Subscriptions</a></h3>
    <p>With 1-on-1 email and phone support, we solve your Ext JS, GWT, CSS and JavaScript issues</p>
    <ul>
        <li><a href="http://extjs.com/store/extjs/#support-table">Ext JS Subscriptions</a></li>
        <li><a href="http://extjs.com/store/gxt/#support-table">Ext GWT Subscriptions</a></li>
    </ul>
    <br/>

    <h3><a href="http://extjs.com/support/training">Training</a></h3>
    <p>Get up to speed quickly with on-site training provided by Ext</p>
    <ul>
        <li><a href="http://extjs.com/support/training/extjs/">Ext JS Training</a></li>
        <li><a href="http://extjs.com/support/training/gxt/">Ext GWT Training</a></li>
    </ul>
    <br/>

    <h3><a href="http://extjs.com/forum">Community</a></h3>
    <p>The Ext community forums and wiki</p>
    <ul>
        <li><a href="http://extjs.com/forum">Forums</a></li>
        <li><a href="http://extjs.com/learn">Learning Center</a></li>

    </ul>
    <br/>
    <h3><a href="http://extjs.com/forum">Ext Solutions</a></h3>
    <p>Enterprise consulting and custom development</p>
    <ul>
        <li><a href="http://extjs.com/support/services/">Find out more &raquo;</a></li>
    </ul>
    </div>

</div>


<div class="flyout-menu" id="store-menu" style="display:none;">
    <div style="width:200px;">
    <h3><a href="http://extjs.com/store/extjs/">Ext JS</a></h3>
    <ul>
        <li><a href="http://extjs.com/store/extjs/">Licenses</a></li>
        <li><a href="http://extjs.com/store/extjs/#support-table">Support Subscriptions</a></li>

    </ul>
    <br/>
    <h3><a href="http://extjs.com/store/gxt/">Ext GWT</a></h3>
    <ul>
        <li><a href="http://extjs.com/store/gxt/">Licenses</a></li>
        <li><a href="http://extjs.com/store/gxt/#support-table">Support Subscriptions</a></li>
    </ul>

    <br/>
    <h3><a href="http://extjs.com/store/faq.php">Help</a></h3>
    <ul>
        <li><a href="http://extjs.com/store/faq.php">Ordering FAQ</a></li>
    </ul>
    </div>
</div>

</body>
</html>